<template>
  <view class="container">
    <!-- 头部标题 -->
    <view class="header">
      <text class="title">智能面试配置</text>
      <text class="subtitle">请选择简历并配置面试风格</text>
    </view>

    <!-- 简历选择卡片 -->
    <view class="card">
      <view class="card-header">
        <text class="card-title">选择简历</text>
        <uni-icons type="plus" size="20" color="#27ba9b" @click="navigateToEdit"></uni-icons>
      </view>
      <scroll-view scroll-y class="resume-list">
        <view 
          v-for="(resume, index) in resumes" 
          :key="index" 
          class="resume-item"
          :class="{ active: selectedResume === index }"
          @click="selectResume(index)"
        >
          <uni-icons 
            type="checkbox-filled" 
            size="20" 
            :color="selectedResume === index ? '#27ba9b' : '#e0e0e0'" 
          />
          <text class="resume-name">{{ resume.jobIntention }}</text>
          <text class="resume-time">更新于: {{ formatDate(resume.updateTime) }}</text>
          <button
            open-type=""
            hover-class="button-hover"
            @click=""
            class="preview-btn"
          >
            预览
          </button>
        </view>
      </scroll-view>
    </view>

    <!-- 面试风格选择 -->
    <view class="card">
      <view class="card-header">
        <text class="card-title">面试风格</text>
      </view>
      <view class="style-options">
        <view 
          v-for="(style, index) in interviewStyles" 
          :key="index" 
          class="style-item"
          :class="{ active: selectedStyle === index }"
          @click="selectStyle(index)"
        >
          <image :src="style.icon" class="style-icon" />
          <text class="style-name">{{ style.name }}</text>
          <text class="style-desc">{{ style.description }}</text>
        </view>
      </view>
    </view>

    <!-- 开始面试按钮 -->
    <view class="start-btn" @click="startInterview">
      <text>开始智能面试</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useMemberStore } from '@/stores'
import type { resumeListInfo } from '@/types/resumeList'
import { getInterviewQuestionsAPI,getResumeListAPI } from '@/service/resumeList'

const memberStore = useMemberStore()
const userId = memberStore.profile!.id

// 简历数据
const resumes = ref<resumeListInfo[]>([
  {
    id: 1,
    userId: 123,
    name: '张三',
    gender: '男',
    birthday: '1995-05-15',
    jobIntention: '前端开发工程师',
    mobile: '13800138000',
    startDate: '2013-09-01',
    endDate: '2017-06-30',
    university: '清华大学',
    majorCourses: '计算机科学与技术',
    internshipExperience: '在字节跳动实习6个月，负责前端开发',
    campusExperience: '学生会技术部部长',
    skillCertificate: '英语六级，计算机二级',
    selfEvaluation: '热爱编程，学习能力强',
    updateTime: new Date('2023-10-15')
  },
  {
    id: 2,
    userId: 123,
    name: '李四',
    gender: '女',
    birthday: '1996-08-20',
    jobIntention: 'Java后端开发',
    mobile: '13900139000',
    startDate: '2014-09-01',
    endDate: '2018-06-30',
    university: '北京大学',
    majorCourses: '软件工程',
    internshipExperience: '在阿里巴巴实习3个月，参与后端开发',
    campusExperience: '研究生会副主席',
    skillCertificate: 'Java高级工程师认证',
    selfEvaluation: '对分布式系统有深入研究',
    updateTime: new Date('2023-11-20')
  }
])

const pageData = ref({
  pageNum: 1,
  pageSize: 10
})

onLoad(async () => {
  // 模拟从API获取简历数据
  const res = await getResumeListAPI(pageData.value.pageNum,pageData.value.pageSize,userId)
  console.log('获取简历列表:', res.data)
  resumes.value = res.data || []
  console.log('简历数据:', resumes.value)
})

// 修改日期格式化方法，处理字符串和Date两种类型
const formatDate = (date: Date | string) => {
  if (!date) return ''
  const dateObj = typeof date === 'string' ? new Date(date) : date
  const year = dateObj.getFullYear()
  const month = String(dateObj.getMonth() + 1).padStart(2, '0')
  const day = String(dateObj.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 面试风格数据
const interviewStyles = ref([
  { 
    name: '技术专家', 
    description: '侧重技术细节和原理', 
    icon: '/static/images/tech-icon.png' 
  },
  { 
    name: 'HR面试', 
    description: '侧重职业发展和行为问题', 
    icon: '/static/images/hr-icon.png' 
  },
  { 
    name: '混合模式', 
    description: '技术与行为问题结合', 
    icon: '/static/images/mix-icon.png' 
  }
])

const selectedResume = ref<number | null>(null)
const selectedStyle = ref<number | null>(null)

// 选择简历
const selectResume = (index: number) => {
  selectedResume.value = index
}

// 选择面试风格
const selectStyle = (index: number) => {
  selectedStyle.value = index
}

// 跳转到编辑简历
const navigateToEdit = () => {
  uni.navigateTo({
    url: '/pagesInterview/editResume/editResume'
  })
}

// 开始面试
const startInterview = async () => {
  if (selectedResume.value === null || selectedStyle.value === null) {
    uni.showToast({
      title: '请选择简历和面试风格',
      icon: 'none'
    })
    return
  }
  
  const res = await getInterviewQuestionsAPI(resumes.value[selectedResume.value!])
  console.log('获取面试问题:', res.data)
  const questionsList:string[] = res.data
  
  // 使用 encodeURIComponent 处理数组参数
  uni.navigateTo({
    url: `/pagesInterview/mockInterview/mockInterview?questions=${encodeURIComponent(JSON.stringify(questionsList))}`
  })
}

</script>

<style lang="scss">
.container {
  padding: 24rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  margin-bottom: 40rpx;
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    display: block;
  }
  .subtitle {
    font-size: 28rpx;
    color: #999;
    margin-top: 10rpx;
    display: block;
  }
}

.card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    
    .card-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.resume-list {
  max-height: 400rpx;
  
  .resume-item {
    display: flex;
    align-items: center;
    padding: 24rpx;
    border-radius: 12rpx;
    margin-bottom: 16rpx;
    background-color: #f9f9f9;
    transition: all 0.3s;
    
    &.active {
      background-color: #e8f5e9;
      border-left: 6rpx solid #27ba9b;
    }
    
    .resume-name {
      font-size: 28rpx;
      color: #333;
      margin-left: 20rpx;
      flex: 1;
    }
    
    .resume-time {
      font-size: 24rpx;
      color: #999;
      margin-right: 20rpx;
    }
  
    .preview-btn {
      background-color: #27ba9b;
      color: white;
      border-radius: 40rpx;
      font-size: 24rpx;
      padding: 8rpx 24rpx;
      margin-left: 15rpx;
      border: none;
      line-height: 1.5;
      
      &.button-hover {
        opacity: 0.9;
        transform: scale(0.98);
      }
    }
  }
}

.style-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
  .style-item {
    width: 48%;
    padding: 24rpx;
    border-radius: 12rpx;
    background-color: #f9f9f9;
    margin-bottom: 20rpx;
    text-align: center;
    transition: all 0.3s;
    
    &.active {
      background-color: #e8f5e9;
      box-shadow: 0 0 0 2rpx #27ba9b;
    }
    
    .style-icon {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 16rpx;
    }
    
    .style-name {
      font-size: 28rpx;
      color: #333;
      display: block;
      font-weight: bold;
      margin-bottom: 8rpx;
    }
    
    .style-desc {
      font-size: 24rpx;
      color: #999;
      display: block;
    }
  }
}

.start-btn {
  background-color: #27ba9b;
  color: white;
  text-align: center;
  padding: 24rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(39, 186, 155, 0.3);
  transition: all 0.3s;
  
  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}
</style>